<template>
    <div class="tab">
        <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
            prop="address"
            label="地址"
            width="180">
                <template slot-scope="scope">
                    <div style="width=80%;background-color:#00bec9;color:white">{{ scope.row.address }}</div>
                </template>        
            </el-table-column>
            <el-table-column
            prop="add"
            label="新增"
            sortable
            width="180">
            </el-table-column>
            <el-table-column
            prop="now"
            sortable
            label="现在">
            </el-table-column>
            <el-table-column
            prop="store"
            sortable
            label="累计">
            </el-table-column>
            <el-table-column
            prop="zhi"
            sortable
            label="治疗">
            </el-table-column>
            <el-table-column
            prop="die"
            sortable
            label="死亡">
            </el-table-column>
        </el-table>
    </div>   


</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          address: "香港",
          add: "18",
          now: "340",
          store: "11329",
          zhi: "10786",
          die: "203"
        },
        {
          id: 2,
          address: "四川",
          add: "2",
          now: "42",
          store: "937",
          zhi: "892",
          die: "93"
        },
        {
          id: 3,
         address: "广东",
          add: "0",
          now: "34",
          store: "2245",
          zhi: "2203",
          die: "8",
          children: [
            {
              id: 31,
              address: "深圳",
              add: "0",
              now: "0",
              store: "423",
              zhi: "420",
              die: "3"
            },
            {
              id: 32,
              address: "广州",
              add: "0",
              now: "0",
              store: "377",
              zhi: "376",
              die: "1"
            }
          ]
        },
        {
          id: 4,
          address: "上海",
          add: "1",
          now: "34",
          store: "1841",
          zhi: "1800",
          die: "7"
        },
        {
          id: 5,
          address: "云南",
          add: "0",
          now: "3",
          store: "234",
          zhi: "229",
          die: "2",
          children: [
            {
              id: 51,
              address: "丽江",
              add: "0",
              now: "0",
              store: "7",
              zhi: "7",
              die: "0"
            },
            {
              id: 52,
              address: "宝山",
              add: "0",
              now: "0",
              store: "9",
              zhi: "9",
              die: "0"
            },{
              id: 53,
              address: "昆明",
              add: "0",
              now: "0",
              store: "53",
              zhi: "53",
              die: "0"
            },
            {
              id: 54,
              address: "曲靖",
              add: "0",
              now: "0",
              store: "13",
              zhi: "13",
              die: "13"
            }

          ]
        },
        {
          id: 6,
          address: "陕西",
          add: "0",
          now: "9",
          store: "561",
          zhi: "459",
          die: "3"
        },
        {
          id: 7,
          address: "天津",
          add: "0",
          now: "17",
          store: "364",
          zhi: "344",
          die: "3"
        },
        {
          id: 8,
          address: "北京",
          add: "0",
          now: "3",
          store: "1049",
          zhi: "1037",
          die: "9"
        },
        {
          id: 9,
          address: "福建",
          add: "1",
          now: "8",
          store: "557",
          zhi: "548",
          die: "1"
        }
      ]
    }
  }
};
</script>

<style>
.tab {
  margin: 10% 20% 0 10%;
}

</style>

